<template>
	<view class="region">
		<picker mode="selector" :range="range"   range-key="name" @change="change" @columnchange="columnchange" :value="value" :disabled="disabled">
      <template>
        <view class="address-text" >
          <view>
            <text class="cell__li--input-placeholder" v-if="!regionStr">请选择地区</text>
            <text v-else>{{ regionStr }}</text>
          </view>
          <view class="iconfont icon-arrow-right address--arrow"></view>
        </view>
      </template>
		</picker>
	</view>
</template>

<script>
// const regionData = require('./region.json');
import {
	SERVICE_AREA_BY_PID,
	SERVICE_AREA_BY_PART_NAME,
	GET_ALL_SERVIE_REGION,
	GET_AREA_BY_NAME,
	RECEIVER_LIST,
} from "@/api/user";
export default {
	/**
	 * 数据
	 */
	props: {
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		},
		// 默认值
		defaultValue: {
			type: Array,
			default() {
				return [];
			}
		}
	},

	/**
	 * 数据
	 */
	data() {
		return {
			range: [], // 省/市/区
			value: 0, // value 的值表示选择了 range 中的第几个（下标从 0 开始）,默认为 [0, 0, 0]，即 range 为 ['第一个省', '第一个省的第一个市', '第一个省的第一个市的第一个区']
			regionStr: '' // 选中的省市区字符串
		};
	},
  onLaunch() {
  },
  /**
   * 监听数据
   */
  watch: {
  	// 默认值
  	defaultValue() {
  		// 设置/更新省市区数据
  		if(this.defaultValue.length) {
  		  this.setDefaultValue()
  		}
  	}
  },

	/**
	 * 组件初次加载完成
	 */
	async mounted() {

		const hh =  await this.getAreaList();
		// 设置/更新省市区数据
		if(this.defaultValue.length) {
			this.setDefaultValue()
		}
	},

	/**
	 * 函数
	 */
	methods: {
		assembleAreaOption(originalArea){
			const resArea = originalArea.map((item)=>{
				return {
					id: item.id,
					level: item.level,
					name: item.name,
					regions_code: item.regions_code,
					whole_name:item.whole_name
					// pid: item.regions_code
				};
			});
			resArea.unshift({
				id: 0,
				level: 1,
				name: '请选择',
				// pid: 0,
			});
			this.range=resArea;
			return resArea;
		},
		async fetchServiceAreaByPid(id){
			return this.$http.get(SERVICE_AREA_BY_PID, {
				'parentId': id
			})
			.then(res => {
				return res.data;
			}).catch((error) => {
				return [];
			});
		},

    getAreaList() {
			console.log('parentAreaId-----',uni.getStorageSync('parentAreaId'));
			this.$http.get(SERVICE_AREA_BY_PID, {
				'parentId': uni.getStorageSync('parentAreaId')
			})
			.then(res => {
				const proList = this.assembleAreaOption(res.data || []);
				// this.rangerange.splice(0, 1, proList);
			}).catch((error) => {
				console.error("getAreaList error", error);
			})
    },

		/**
		 * 设置默认值
		 */
		async setDefaultValue() {
			// 查找省
			let valueTemp = [];
			const rangeTemp = [...this.range];
			let address=[];
			this.$http.get(GET_ALL_SERVIE_REGION, {
				'id': this.defaultValue[0]
			})
			.then(res => {
				// this.rangerange.splice(0, 1, proList);
				 address = res.data.map((item)=>{
				console.log('res item',item.id,'----',this.defaultValue[0]);
				if(parseInt(item.id)===parseInt(this.defaultValue[0])){
					console.log('whole_name',item.whole_name);
					this.value =item.id;
					this.regionStr=item.whole_name;
				}
				return {
					id: item.id,
					level: item.level,
					name: item.name,
					regions_code: item.regions_code,
					whole_name:item.whole_name
					// pid: item.regions_code
				};
			});
			
			this.$emit('change',address);
			}).catch((error) => {
				console.error("SERVICE_AREA_BY_PART_NAME error", error);
			})
			 
		},

		/**
		 * 某一列的值改变时触发
		 * @param {Number} event.detail.column 表示改变了第几列（下标从0开始）
		 * @param {Number} event.detail.value 表示变更值的下标
		 */
		async columnchange(event) {
			const column = event.detail.column;
			this.value = event.detail.value;
			 
		},

		/**
		 * 确认选择
		 */
		change(event) {
			this.value =this.range[event.detail.value].id;
			this.regionStr= this.range[event.detail.value].whole_name;
			let address=[];
			this.$http.get(GET_ALL_SERVIE_REGION, {
				'id': this.range[event.detail.value].id
			})
			.then(res => {
				// this.rangerange.splice(0, 1, proList);
				console.log("res ---- ", res);
				 address = res.data.map((item)=>{
				return {
					id: item.id,
					level: item.level,
					name: item.name,
					regions_code: item.regions_code,
					whole_name:item.whole_name
					// pid: item.regions_code
				};
			});
			this.$emit('change',address);
			}).catch((error) => {
				console.error("SERVICE_AREA_BY_PART_NAME error", error);
			})
			


		}
	}
};
</script>

<style lang="less" scoped>
.address-text{
  width: 510rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ellipsis-1 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.content {
	text-align: right;
}

.placeholder {
  font-size: 30rpx;
	color: #949596;
}
.address--arrow{
    flex-shrink: 0;
    font-size: 44rpx;
    color: #cccccc;
  }
</style>
